<template>
  <div style="padding: 20px;" class="公告管理">
    <el-input placeholder="类型" v-model="input" clearable style="width: 200px;margin-bottom: 10px;"></el-input>
    <el-input placeholder="标题" v-model="input" clearable style="width: 200px;margin-bottom: 10px;"></el-input>
    <el-select v-model="isShow" placeholder="是否展示" clearable style="width: 200px;margin-bottom: 10px;">
      <el-option label="展示" value="0"></el-option>
      <el-option label="隐藏" value="1"></el-option>
    </el-select>
    <el-date-picker v-model="value1" type="date" placeholder="发布时间起"
      style="width: 200px;margin-bottom: 10px;"></el-date-picker>
    <el-date-picker v-model="value2" type="date" placeholder="发布时间止"
      style="width: 200px;margin-bottom: 10px;"></el-date-picker>
    <el-button type="primary" class="el-icon-search"> 搜索</el-button>
    <el-button type="success" class="el-icon-edit" @click="add"> 添加</el-button>
    <div style="overflow-y: auto;">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="isShow" label="状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.isShow" type="warning" round size="small">
              {{ scope.isShow | fmtisShow }}</el-button>
            <el-button v-else type="success" plain size="small">
              {{ scope.isShow | fmtisShow }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="dateAdd" label="添加时间/更新时间"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">{{ scope.row.date }}
            <span style="color: #409eff;margin-right: 5px;" @click="add">编辑</span>
            <span style="color: #ff0000;" @click="deleteAll(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import { tableList } from "@/api/announcementManage";
export default {
  data() {
    return {
      value1: '', 
      value2: '',
      isShow:'',
      input: '',
      params: { page: 1, pageSize: 10 },
      currentPage: 1,
      total: 10,
      tableData: [
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      delete: []
    }
  },
  async mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      let { data: res } = await tableList(this.params)
      console.log(res);
      this.total = res.totalRow
      this.tableData = res.result
    },
    handleSelectionChange(val) {
      this.delete = val
    },
    deleteAll() {
      this.$confirm('删除无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.delete);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val
      this.getList()
    },

    add() {
      this.$router.push("/AnnouncementManageAdd")
    }
  },
  filters: {
    fmtisShow(val) {
      if (val) return '禁用'
      else return "展示"
    }
  },
}
</script>
